<template>
	<image style="width: 100%;position: absolute;top: 0;left: 0;z-index: -1;" mode="widthFix" src="https://static.wddzq.com/static/beijing.png"></image>
	<view style="height: 100%;display: flex;flex-direction: column;align-items: center;position: relative;">
		<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0" title="" backgroundColor="transparent" color="#333">
			<view style="height: 40px;display: flex;align-items: center;" @click="handleBack">
				<view style="width: 30rpx;"></view>
				<u-icon name="arrow-left" size="26" color="#fff"></u-icon>
				<view style="width: 10rpx"></view>
				<text style="font-size: 28rpx;color: #fff;">返回</text>
			</view>
		</tui-navigation-bar>
		<image src="https://static.wddzq.com/static/join_header.png" style="width: 409rpx;height: 126rpx;margin-top: 260rpx;" />

		<view style="margin-top: 214rpx;margin-bottom: 12rpx;font-size: 36rpx;color: #fff;height: 40rpx;line-height: 40rpx;">免费入驻</view>
		<view style="font-size: 24rpx;color: #666;height: 32rpx;line-height: 32rpx;margin-bottom: 72rpx;">仅需3步 极速入驻</view>

		<view class="step-list">
			<view class="step-item">
				<view class="step-content">1</view>
				<text>场地logo</text>
				<view class="step-line">
					<image style="width: 88rpx;height: 14rpx;" src="https://static.wddzq.com/static/buzou.png"></image>
				</view>
			</view>
			<view class="step-item">
				<view class="step-content">2</view>
				<text>基本信息</text>
				<view class="step-line">
					<image style="width: 88rpx;height: 14rpx;" src="https://static.wddzq.com/static/buzou.png"></image>
				</view>
			</view>
			<view class="step-item">
				<view class="step-content">3</view>
				<text>等待审核</text>
				<view class="step-line">
					<image style="width: 88rpx;height: 14rpx;" src="https://static.wddzq.com/static/buzou.png"></image>
				</view>
			</view>
			<view class="step-item">
				<view class="step-content">4</view>
				<text>入驻成功</text>
			</view>
		</view>

		<view style="margin: 0 88rpx;width: 80%;margin-top: 160rpx">
			<u-button class="btn" @click="handleClick" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;background-color: #fff;color: #333;" color="#1c1c1e">
				<text>立即入驻</text>
			</u-button>
		</view>

		<view style="font-size: 24rpx;color: #999;text-align: center;position: absolute;left: 0;bottom: 20rpx;width: 100%;">搭鸭</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			},
			handleClick() {
				uni.navigateTo({
					url: '/pages/store-into/store-into'
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #000;
	}

	.tui-header-icon {
		width: 120rpx;
		height: 32px;
		position: fixed;
		top: 0;
		left: 20rpx;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		transform: translateZ(0);
		z-index: 99999;
		box-sizing: border-box;
	}
.step-list {
	display: flex;
	width: 100%;
	justify-content: center;
}
.step-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
}
.step-line {
	width: 60rpx;
	height: 0rpx;
	opacity: 0.6;
	position: absolute;
	top: 2rpx;
	left: 148rpx;
}
.step-item .step-content {
	width: 64rpx;
	height: 64rpx;
	background-color: rgba(255, 255, 255, .2);
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 36rpx;
}
.step-item text {
	margin-top: 24rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 40rpx;
}
</style>
